<template>
	<s-layout title="商品">
		<su-sticky bgColor="#fff">
			<view class="time-chioce">
        <uni-datetime-picker v-model="state.range" type="range" rangeSeparator="至" @change="dateChange"/>
			</view>
		</su-sticky>
		<view class="s-card">
			<view class="title">
				<text>付款商品数(个)</text>
			</view>
      <line-chart :data="state.data" :xAxis="state.date" v-if="state.showChart"/>
		</view>
		<view class="s-card">
			<view class="s-card-content">
				<view>
					<text class="num">{{state.history.sps || 0}}</text>
					<text>历史累计总商品数</text>
				</view>
				<view>
					<text class="num">{{state.history.asps || 0}}</text>
					<text>历史累计总付款商品数</text>
				</view>
			</view>
		</view>
		<view class="table-card">
			<uni-table border emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">日期</uni-th>
					<uni-th align="center">付款商品数</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
        <uni-tr v-for="(item,index) in state.date" :key="index">
          <uni-td align="center">{{item}}</uni-td>
          <uni-td align="center">￥{{state.data[index]}}</uni-td>
        </uni-tr>
			</uni-table>
		</view>
	</s-layout>
</template>

<script setup>
  import LineChart from '../../component/linechart.vue';
  import {
    reactive
  } from 'vue';
  import {
    onLoad,
    onReachBottom
  } from "@dcloudio/uni-app"
  import sheep from '@/sheep';

  const state = reactive({
    showChart:false,
    range: [],
    data: [],
    date: [],
    history: {}
  })

  function dateChange(e) {
    state.range = e;
    state.date = [];
    state.data = [];
    getData();
  }

  async function getData() {
    state.showChart = false;
    const res = await sheep.$mapi.statistics.dataDetail({
      date: state.range
    });
    if (!res.code) return;
    res.data.forEach(item => {
      state.date.push(item.date);
      state.data.push(item.payGoodsNum);
    });
    state.showChart = true;
  }

  async function historyData() {
    const res = await sheep.$mapi.statistics.historyData();
    if (!res.code) return;
    state.history = res.data;
  }

  onLoad((options) => {
    getData();
    historyData();
  });
</script>

<style lang="scss" scoped>
	.time-chioce{
		padding: 20rpx;
	}
	.s-card {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 28rpx;
		padding: 28rpx;

		.title {
			position: relative;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			padding-left: 20rpx;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #3A43FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.s-card-content {
			display: flex;
			justify-content: space-around;

			>view {
				margin: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
				color: #6f6f6f;

				.num {
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					margin-bottom: 18rpx;
				}
			}
		}
	}

	.table-card {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 28rpx;
		overflow: hidden;

		.uni-table-th {
			background: #E6EFFF;
		}

		.uni-table-td {
			background: #FAFCFF;
		}

		.table--border {
			border-color: #fff;
		}
	}
</style>
